<template>
	<div class="app-container">
		<div class="search-container">
			<el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="关键字" prop="keywords">
					<el-input
						v-model="queryParams.keywords"
						placeholder="请输入关键字"
						clearable
						style="width: 200px"
						@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery"
					>
						<i-ep-search/>
						搜索
					</el-button
					>
					<el-button @click="resetQuery">
						<i-ep-refresh/>
						重置
					</el-button
					>
				</el-form-item>
			</el-form>
		</div>
		
		<el-card shadow="never">
			<template #header>
				<div class="flex justify-between">
					<div>
						<el-button type="success" v-hasPerm="['sys:device:add']" @click="openDialog(0,'新增')"
						>
							<i-ep-plus/>
							新增
						</el-button
						>
					</div>
				</div>
			</template>
			
			<el-table
				v-loading="loading"
				:data="tableList"
				highlight-current-row
				border
			>
				<el-table-column
					label="序号"
					type="index"
					width="60"
					align="center"
				></el-table-column>
				<el-table-column
					key="deviceCode"
					label="设备编码"
					align="center"
					prop="deviceCode"
					width="180"
				/>
				<el-table-column
					key="securityId"
					label="信息安全编码"
					align="center"
					prop="securityId"
					width="180"
				/>
				<el-table-column
					key="deviceTypeName"
					label="设备分类"
					align="center"
					width="130"
					prop="deviceTypeName"
				>
				</el-table-column>
				<el-table-column
					key="status"
					label="状态"
					width="160"
					align="center"
					prop="statusName"
				>
					<template #default="scope">
						<el-tag :type="scope.row.statusName === '已审核' ? '' : scope.row.statusName === '已禁用' ? 'danger' : 'info'">
							{{ scope.row.statusName }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					key="description"
					label="设备描述"
					width=""
					align="center"
					prop="description"
				/>
				<el-table-column
					key="disableReason"
					label="禁用原因"
					width=""
					align="center"
					prop="disableReason"
				/>
				<el-table-column
					key="createTime"
					label="创建时间"
					width="160"
					align="center"
					prop="createTime"
				/>
				<el-table-column label="操作" fixed="right" :width="mobile === 'mobile' ? 90 : 220">
					<template #default="scope">
						<el-button
							type="primary"
							link
							size="small"
							v-if="scope.row.status === 0"
							v-hasPerm="['sys:device:audit']"
							@click="handleAudit(scope.row.id, '审核')"
						>
							<i-ep-userFilled/>
							审核
						</el-button
						>
						<el-button
							type="danger"
							link
							size="small"
							v-hasPerm="['sys:device:disable']"
							@click="handleDisable(scope.row.id)"
							v-if="scope.row.status === 1"
						>
							<i-ep-warnTriangleFilled/>
							禁用
						</el-button>
						<el-button
							type="success"
							link
							size="small"
							v-hasPerm="['sys:device:enable']"
							@click="handleEnable(scope.row.id)"
							v-if="scope.row.status === 2"
						>
							<i-ep-successFilled/>
							启用
						</el-button>
						<el-button
							type="primary"
							link
							size="small"
							v-if="scope.row.status === 0"
							v-hasPerm="['sys:device:edit']"
							@click="openDialog(scope.row.id, '编辑')"
						>
							<i-ep-edit/>
							编辑
						</el-button
						>
<!--						<el-button-->
<!--							type="primary"-->
<!--							link-->
<!--							size="small"-->
<!--							v-if="scope.row.status !== 0"-->
<!--							v-hasPerm="['sys:device:edit']"-->
<!--							@click="openDialog(scope.row.id, '详情')"-->
<!--						>-->
<!--							<i-ep-grid/>-->
<!--							详情-->
<!--						</el-button-->
<!--						>-->
						<el-button
							type="primary"
							link
							size="small"
							v-if="scope.row.status !== 0"
							v-hasPerm="['sys:device:edit']"
							@click="openDetail(scope.row.id, '详情')"
						>
							<i-ep-grid/>
							详情
						</el-button
						>
						<el-button
							type="primary"
							link
							size="small"
							v-if="scope.row.status === 0"
							v-hasPerm="['sys:device:delete']"
							@click="handleDelete(scope.row.id)"
						>
							<i-ep-delete/>
							删除
						</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			
			<pagination
				v-if="total > 0"
				v-model:total="total"
				v-model:page="queryParams.pageIndex"
				v-model:limit="queryParams.pageSize"
				@pagination="handleQuery"
			/>
		</el-card>
		
		<!-- 新增/修改弹窗 -->
		<addForm
			v-if="dialogAddOrEdit.visible"
			:dialog-add-or-edit="dialogAddOrEdit"
			class="system"
			:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
			@sendClose="sendClose"
		></addForm>
		
		<detail-description v-if="dialogDetail.visible" :dialogDetail="dialogDetail"
												class="system"
												:style="{'--mobileAddFormHeight': mobile === 'mobile' ? (screenHeight - 117) + 'px' : 'auto'}"
												@sendDetailClose="sendDetailClose"></detail-description>
		
		<el-dialog
			title="禁用提示"
			draggable
			width="300px"
			v-model="dialogDisable.visible"
			@close="disableFormClose"
			close-icon="CloseBold"
		>
			<el-form label-width="0" :model="formDisable" ref="disableFormRef" :rules="disableRules">
				<label>请输入禁用原因</label>
				<el-form-item prop="description">
					<el-input placeholder="请输入禁用原因" v-model="formDisable.description"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog_footer">
					<el-button type="primary" :loading="loading" @click="doDisable">禁 用</el-button>
					<el-button @click="disableFormClose(true)">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	
	</div>
</template>

<script lang="ts">
export default {
	name: "device",
};
</script>

<script lang="ts" setup>
import addForm from "@/views/system/device/addForm.vue";
import {
	ParamsType,
	DeviceListType
} from "@/api/system/device/types";
import {
	getDeviceList,
	deleteDevice,
	auditDevice,
	disableDevice,
	enableDevice,
} from "@/api/system/device/index.ts";
import {useUserStore} from "@/store/modules/user";
import {getDicts} from "@/store/modules/dict";
import {resetPasswordCommander} from "@/api/constructor/project";
import DetailDescription from "@/views/system/device/detailDescription.vue";

import {useScreen} from "@/store/modules/screen";
import {computed} from "vue";

const screenStore = useScreen()
const mobile = computed(() => ( screenStore.device ));
const screenHeight = computed(() => ( screenStore.screenHeight ));

function initScreen(){
}

const useUser = useUserStore();

const total = ref(0);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const tableList = ref<DeviceListType[]>();
const queryParams = reactive<ParamsType>({
	pageIndex: 1,
	pageSize: 20,
});


const currentUserId = useUser.objectId;

const dialogAddOrEdit = reactive<DialogOption>({
	visible: false,
	title: "新增设备信息",
	footBtn: "新增",
});

const dialogDetail = reactive<DialogOption>({
	visible: false,
	id: 0,
	title: "设备详情",
	footBtn: "",
	detail: '详情'
});

/* 列表查询 */
async function handleQuery() {
	let list = await getDeviceList(queryParams);
	if (list.type === 0) {
		if (list.success) {
			tableList.value = list.data.list;
			
			queryParams.pageIndex = list.data.pageNum;
			queryParams.pageSize = list.data.pageSize;
			total.value = list.data.total;
		} else {
			ElMessage.error(list.msg);
		}
	} else {
		ElMessage.error(list.msg);
	}
}

/* 新增/编辑 */
function openDialog(id, detail) {
	dialogAddOrEdit.visible = true;
	if (id) {
		dialogAddOrEdit.title = "修改设备信息";
		dialogAddOrEdit.footBtn = "修改";
		dialogAddOrEdit.id = id;
		// dialogAddOrEdit.detail = detail;
	} else {
		dialogAddOrEdit.id = 0;
		dialogAddOrEdit.title = "新增设备信息";
		dialogAddOrEdit.footBtn = "新增";
	}
	dialogAddOrEdit.detail = detail;
}

function openDetail(id, detail) {
	dialogDetail.title = "设备详情";
	dialogDetail.footBtn = "";
	dialogDetail.id = id;
	dialogDetail.detail = detail;
	dialogDetail.visible = true;
}

async function handleAudit(id) {
	let confirm = await ElMessageBox.confirm("审核通过确认?", "审核提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
		return;
	}
	auditDevice(id).then(data => {
		if (data.success) {
			ElMessage.success(data.msg)
		} else {
			ElMessage.error(data.msg)
		}
	})
	handleQuery()
}

const dialogDisable = reactive({
	id: 0,
	visible: false,
})

const disableRules = {
	description: [
		{required: true, trigger: 'blur', message: '请输入禁用原因!'},
	]
}

const formDisable = reactive({
	description: ''
})

const disableFormRef = ref()

async function handleDisable(id) {
	dialogDisable.id = id;
	dialogDisable.visible = true;
}

function doDisable() {
	disableFormRef.value.validate((valid) => {
		if (valid) {
			disableDevice(dialogDisable.id, formDisable.description).then(data => {
				if (data.success) {
					ElMessage.success(data.msg)
					disableFormClose();
					handleQuery()
				} else {
					ElMessage.error(data.msg)
				}
			})
		}
	})
}

function disableFormClose(quxiao) {
	if (quxiao) {
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
	}
	disableFormRef.value.resetFields();
	disableFormRef.value.clearValidate();
	dialogDisable.visible = false;
}

async function handleEnable(id) {
	let confirm = await ElMessageBox.confirm("启用确认?", "启用提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消!'
		})
		return;
	}
	enableDevice(id).then(data => {
		if (data.success) {
			ElMessage.success(data.msg)
		} else {
			ElMessage.error(data.msg)
		}
	})
	handleQuery()
}

/* 删除班组 */
async function handleDelete(id) {
	let confirm = await ElMessageBox.confirm("确认删除?", "删除提示", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => true)
		.catch(() => false);
	if (!confirm) {
		ElMessage({
			type: 'info',
			message: '已取消！'
		})
		return;
	}
	let delInfo = await deleteDevice(id);
	if (delInfo.type === 0) {
		if (delInfo.success) {
			ElMessage.success(delInfo.msg);
			resetQuery();
		} else {
			ElMessage.error(delInfo.msg);
		}
	} else {
		ElMessage.error(delInfo.msg);
	}
}

/**
 * 重置查询
 */
function resetQuery() {
	queryFormRef.value.resetFields();
	queryParams.pageIndex = 1;
	queryParams.pageSize = 20;
	handleQuery();
}

/* 关闭弹窗并刷新列表 */
function sendClose(query) {
	dialogAddOrEdit.visible = false;
	if (query) {
		handleQuery();
	}
}

function sendDetailClose(query) {
	dialogDetail.visible = false;
}

onMounted(() => {
	initScreen()
	
	handleQuery();
});
</script>

<style lang="less" scoped>

</style>
